<template>
  <div class="plugin-config-template">
    <div class="right scroll-box">
      <el-scrollbar>
        <div class="padding">
          <template v-for="(list, key) in list" :key="key">
            <template v-if="key == keyword" >
              <el-row :gutter="30">
                <el-col :md="8" :lg="6" :xl="4" v-for="item in list" :key="item.id">
                  <div class="list" :class="{ on: templateModel.has(item) }" @click="form.open(item)">
                    <img class="flash" :src="app.img(item.image)">
                    <span class="flash wrap">{{ item.name }}</span>
                    <i v-if="templateModel.hasUpdate(item)">{{ plugin.lang('template.update') }}</i>
                  </div>
                </el-col>
              </el-row>
            </template>
          </template>
        </div>
      </el-scrollbar>
    </div>
    <div class="left scroll-box">
      <el-scrollbar>
        <el-menu :default-active="keyword" @select="key => keyword = key">
          <template v-for="key in ['print', 'print_view', 'print_refund', 'ticket', 'ticket_refund', 'voucher', 'gift']" :key="key" :index="key">
            <el-menu-item :index="key">
              {{ plugin.lang('template.' + key) }}
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
    <Form ref="form" />
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import templateModel from '../../model/template'

import Form from './form'

export default {
  components: {
    Form
  },
  setup() {
    const keyword = ref('print')
    // 列表
    const list = templateModel.store
    // 表单
    const form = ref(null)

    // 加载
    templateModel.getStore()

    return {
      app,
      lang: app.lang,
      plugin: app.plugin.index,
      templateModel,
      keyword,
      form,
      list,
    }
  }
}
</script>